import React from 'react';
import { Card, Typography, Descriptions, Divider } from 'antd';
import { useSelector } from 'react-redux';
import { UserOutlined } from '@ant-design/icons';

const { Title, Text } = Typography;

const ProfilePage = () => {
  const { userInfo } = useSelector((state) => state.user);

  // 如果用户信息不存在，显示加载状态
  if (!userInfo) {
    return (
      <div style={{ textAlign: 'center', padding: '50px 0' }}>
        <Text>加载中...</Text>
      </div>
    );
  }

  return (
    <div className="profile-page">
      <Card className="profile-card">
        <div className="profile-header" style={{ textAlign: 'center', marginBottom: '24px' }}>
          <UserOutlined style={{ fontSize: '48px', color: '#1890ff' }} />
          <Title level={3} style={{ marginTop: '16px' }}>{userInfo.name || userInfo.phone || '用户'}</Title>
        </div>
        
        <Divider />
        
        <Descriptions column={2} bordered>
          <Descriptions.Item label="用户ID">{userInfo.id || '未知'}</Descriptions.Item>
          <Descriptions.Item label="手机号码">{userInfo.phone || '未设置'}</Descriptions.Item>
          <Descriptions.Item label="用户角色">
            {userInfo.role === 'admin' ? '管理员' : '普通用户'}
          </Descriptions.Item>
          <Descriptions.Item label="创建时间">
            {userInfo.createdAt ? new Date(userInfo.createdAt).toLocaleString() : '未知'}
          </Descriptions.Item>
        </Descriptions>
      </Card>
    </div>
  );
};

export default ProfilePage;